import React, { FC, useRef, useState } from 'react'
import './index.scss'
import Photo from '@/assets/images/404.png'
import { spanTypes } from '../../utils/types'
import { useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { useCountDown } from 'ahooks';



const NotFound: FC<any> = () => {
    let timer: any = null;
    const bgstar: any = useRef()
    const [spanList, setSpanList] = useState<Array<spanTypes>>([])
    let [count, setCount] = useState<any>(5)
    const router = useNavigate()
    const getSpanListInit = useCallback(() => {
        let width = bgstar.current.clientWidth;
        let height = bgstar.current.clientHeight;
        for (var i = 0; i < 520; i++) {

            let left = Math.floor(Math.random() * width)
            let top = Math.floor(Math.random() * height)
            let scaler = (Math.random() * 1.5)
            let rate = (Math.random() * 2.5)

            let r = Math.random() * 255;
            let g = Math.random() * 255;
            let b = Math.random() * 255;
            let opacity = Math.random() * 1

            spanList.push({
                left: left + 'px',
                top: top + 'px',
                transform: `scale(${scaler})`,
                animationDelay: rate + 's',
                background: `rgba(${255},${255},${255},${opacity})`,
            })
        }
        setSpanList([...spanList])
    }, [])

    const [targetDate, setTargetDate] = useState<number>();
    const [countdown] = useCountDown({
        targetDate,
        onEnd: () => {
            router('/app/home')
        },
    });
    const timeDown = () => {
        timer = setInterval(() => {
            if (count > 0) {
                setCount(--count)
            } else {
                clearInterval(timer)
                timer = null
            }
        }, 1000)
    }
    useEffect(() => {
        getSpanListInit()

        setTargetDate(Date.now() + 5000)
    }, [])
    return (
        <div className="errorpage" id="bgstar" ref={bgstar} >
            <img src={Photo} alt="" className="myimg" />
            {
                spanList.map((item, index) => (
                    <span className='spandot' style={item} key={index}></span>
                ))
            }
            <div className="down" onClick={() => router('/app/home')}> 剩余 {Math.floor(countdown / 1000)} S </div>
        </div>
    )
}

export default NotFound